﻿@page "/tabs"
@inject IStringLocalizer<Tabs> Localizer

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["H1"]</h4>

<p>@((MarkupString)Localizer["P1"].Value)</p>

<Tips>
    <p>
        @((MarkupString)Localizer["TipsP"].Value)
        <ul class="ul-demo mb-3">
            <li>@Localizer["TipsLi1"]</li>
            <li>@Localizer["TipsLi2"]</li>
        </ul>
        <div>@((MarkupString)Localizer["TipsDiv"].Value)</div>
    </p>
    <p>@Localizer["TipsP2"]</p>
</Tips>

<p>
    <b>@Localizer["InfoTitle"]</b>
</p>

<ul class="ul-demo">
    <li>@((MarkupString)Localizer["InfoItem1"].Value)</li>
    <li>@((MarkupString)Localizer["InfoItem2"].Value)</li>
    <li>@((MarkupString)Localizer["InfoItem3"].Value)</li>
    <li>@((MarkupString)Localizer["InfoItem4"].Value)</li>
</ul>

<DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]" Name="Normal">
    <Tab>
        <TabItem Text="@Localizer["TabItem1Text"]">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem4Text"]">
            <div>@Localizer["TabItem4Content"]</div>
        </TabItem>
    </Tab>
</DemoBlock>

<DemoBlock Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]" Name="Card">
    <Tab IsCard="true">
        <TabItem Text="@Localizer["TabItem1Text"]">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem4Text"]">
            <div>@Localizer["TabItem4Content"]</div>
        </TabItem>
    </Tab>
</DemoBlock>

<DemoBlock Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Intro"]" Name="Border">
    <Tab IsBorderCard="true">
        <TabItem Text="@Localizer["TabItem1Text"]">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem4Text"]">
            <div>@Localizer["TabItem4Content"]</div>
        </TabItem>
    </Tab>
</DemoBlock>

<DemoBlock Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]" Name="Icon">
    <Tab IsCard="true">
        <TabItem Text="@Localizer["TabItem1Text"]" Icon="fa fa-user">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]" Icon="fa fa-dashboard">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]" Icon="fa fa-sitemap">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem4Text"]" Icon="fa fa-bank">
            <div>@Localizer["TabItem4Content"]</div>
        </TabItem>
    </Tab>
</DemoBlock>

<DemoBlock Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]" Name="Closable">
    <Tips>
        @((MarkupString)Localizer["Tips2"].Value)
    </Tips>
    <Tab IsCard="true" ShowClose="true">
        <TabItem Text="@Localizer["TabItem1Text"]" Icon="fa fa-user" Closable="false">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]" Icon="fa fa-dashboard">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]" Icon="fa fa-sitemap">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem4Text"]" Icon="fa fa-bank">
            <div>@Localizer["TabItem4Content"]</div>
        </TabItem>
    </Tab>
</DemoBlock>

<DemoBlock Title="@Localizer["Block6Title"]" Introduction="@Localizer["Block6Intro"]" Name="Placement">
    <p class="text-center">
        <div class="btn-group">
            <button class="btn btn-primary" @onclick="e => SetPlacement(Placement.Top)">Top</button>
            <button class="btn btn-primary" @onclick="e => SetPlacement(Placement.Right)">Right</button>
            <button class="btn btn-primary" @onclick="e => SetPlacement(Placement.Bottom)">Bottom</button>
            <button class="btn btn-primary" @onclick="e => SetPlacement(Placement.Left)">Left</button>
        </div>
    </p>
    <Tab Placement="@BindPlacement" Height="200">
        <TabItem Text="@Localizer["TabItem1Text"]">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem5Text"]">
            <div>@Localizer["TabItem5Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem6Text"]">
            <div>@Localizer["TabItem6Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem7Text"]">
            <div>@Localizer["TabItem7Content"]</div>
        </TabItem>
    </Tab>
    <Divider Text="@Localizer["DividerText"]"></Divider>
    <Tab Placement="@BindPlacement" IsCard="true" Height="200">
        <TabItem Text="@Localizer["TabItem1Text"]">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem5Text"]">
            <div>@Localizer["TabItem5Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem6Text"]">
            <div>@Localizer["TabItem6Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem7Text"]">
            <div>@Localizer["TabItem7Content"]</div>
        </TabItem>
    </Tab>
    <Divider Text="@Localizer["DividerText"]"></Divider>
    <Tab Placement="@BindPlacement" IsBorderCard="true" Height="200">
        <TabItem Text="@Localizer["TabItem1Text"]">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem5Text"]">
            <div>@Localizer["TabItem5Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem6Text"]">
            <div>@Localizer["TabItem6Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem7Text"]">
            <div>@Localizer["TabItem7Content"]</div>
        </TabItem>
    </Tab>
</DemoBlock>

<DemoBlock Title="@Localizer["Block7Title"]" Introduction="@Localizer["Block7Intro"]" Name="AddTabItem">
    <p>
        <Button Icon="fa fa-plus-circle" OnClickWithoutRender="@(() => AddTab(TabSet))" Text="@Localizer["AddButtonText"]">
        </Button>
        <Button Color="Color.Danger" Icon="fa fa-minus-circle" IsDisabled="@RemoveEndable" OnClickWithoutRender="@(() => RemoveTab(TabSet))" Text="@Localizer["RmoveButtonText"]">
        </Button>
        <Button Icon="fa fa-fa" OnClickWithoutRender="@(() => Active(TabSet))" Text="@Localizer["ActiveButtonText"]">
        </Button>
    </p>
    <Tab IsBorderCard="true" @ref="TabSet">
        <TabItem Text="@Localizer["TabItem1Text"]">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem4Text"]">
            <div>@Localizer["TabItem4Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem7Text"]">
            <div>@Localizer["TabItem7Content"]</div>
        </TabItem>
    </Tab>
</DemoBlock>

<DemoBlock Title="@Localizer["Block8Title"]" Introduction="@Localizer["Block8Intro"]" Name="Component">
    <p>
        @((MarkupString)Localizer["P2"].Value)
    </p>
    <Tab IsBorderCard="true">
        <TabItem Text="@Localizer["TabItem8Text"]">
            <Counter></Counter>
        </TabItem>
        <TabItem Text="@Localizer["TabItem9Text"]">
            <FetchData></FetchData>
        </TabItem>
    </Tab>
</DemoBlock>

<DemoBlock Title="@Localizer["Block9Title"]" Introduction="@Localizer["Block9Intro"]" Name="DynamicTabItem">
    <p>
        @((MarkupString)Localizer["P3"].Value)
    </p>
    <Layout SideWidth="120px" style="min-height: 180px; border: 1px solid #ddd; border-radius: 4px;">
        <Header>
            <div class="header">@Localizer["Block9Div"]</div>
        </Header>
        <Side>
            <div style="border-right: 1px solid #e6e6e6; height: 100%; overflow: auto; padding: 1rem 0; background-color: #f8f9fa;">
                <Menu Items="@GetSideMenuItems()" IsVertical="true" OnClick="@OnClickMenuItem" @ref="TabMenu" />
            </div>
        </Side>
        <Main>
            <div class="tab-main-demo">
                <Tab @ref="TabSetMenu" ShowClose="true">
                </Tab>
            </div>
        </Main>
    </Layout>
</DemoBlock>

<DemoBlock Title="@Localizer["Block10Title"]" Introduction="@Localizer["Block10Intro"]" Name="App">
    <Tips>@((MarkupString)Localizer["Tips3"].Value)</Tips>
    <p>
        <button type="button" class="btn btn-outline-primary" @onclick="@(e => AddTab(TabSet2))">
            <i class="fa fa-plus-circle"></i>
            <span>@Localizer["AddButtonText"]</span>
        </button>
        <button type="button" class="btn btn-outline-danger" disabled="@((TabSet2?.Items.Count() > 4) ? null : "true")" @onclick="@(e => RemoveTab(TabSet2!))">
            <i class="fa fa-minus-circle"></i>
            <span>@Localizer["RmoveButtonText"]</span>
        </button>
    </p>
    <Tab ShowExtendButtons="true" ShowClose="true" @ref="TabSet2">
        <TabItem Text="@Localizer["TabItem1Text"]" Closable="false">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem4Text"]">
            <div>@Localizer["TabItem4Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem7Text"]">
            <div>@Localizer["TabItem7Content"]</div>
        </TabItem>
    </Tab>
</DemoBlock>

<DemoBlock Title="@Localizer["Block11Title"]" Introduction="@Localizer["Block11Intro"]" Name="IsOnlyRenderActive">
    <Tab IsBorderCard="true" IsOnlyRenderActiveTab="true">
        <TabItem Text="@Localizer["TabItem8Text"]">
            <Counter></Counter>
        </TabItem>
        <TabItem Text="@Localizer["TabItem9Text"]">
            <FetchData></FetchData>
        </TabItem>
    </Tab>
</DemoBlock>

<DemoBlock Title="@Localizer["BlockSetTextTitle"]" Introduction="@Localizer["BlockSetTextIntro"]" Name="SetText">
    <Button Text="@Localizer["BlockSetTextButtonText"]" OnClickWithoutRender="SetTabItemText" class="mb-2"></Button>
    <Tab IsBorderCard="true">
        <TabItem Text="@Localizer["TabItem8Text"]" @ref="TabItemElement">
            <div>@((MarkupString)Localizer["BlockSetTextDesc"].Value)</div>
        </TabItem>
    </Tab>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" Title="@Localizer["AttTitle"]" />

<MethodTable Items="@GetMethods()" Title="@Localizer["MethodTitle"]" />
